<template>
    <vue-editor id="editor"
                useCustomImageHandler
                @imageAdded="handleImageAdded" v-model="originContent">
    </vue-editor>
</template>

<script>
  import { VueEditor } from 'vue2-editor'
  export default {
    components: {
      VueEditor
    },
    props: {
      content: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        originContent: this.content
      }
    },
    methods: {
      handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
        let formData = new FormData();
        formData.append('filedata', file)

        axios.post('/upload', formData, {headers:{'Content-Type':'multipart/form-data'}})
          .then((result) => {
            let url = result.data.data.file_url;
            Editor.insertEmbed(cursorLocation, 'image', url);
            resetUploader();
          })
          .catch((err) => {
            console.log(err);
          })
      }
    },
    watch: {
      originContent(val) {
        this.$emit('update', val)
      }
    }
  }
</script>